<template>
  <a-drawer
    width="50%"
    placement="right"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
    :title="drawerStatus === 'edit' ? '编辑产品' : drawerStatus === 'add' ? '创建产品' : '产品详情'"
    class="form-drawer form-card"
  >
    <a-form-model
      :model="ruleForm"
      ref="ruleForm"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :class="{ 'form-model': drawerStatus !== 'info' }"
    >
      <a-form-model-item label="名称" prop="name">
        <a-input v-model="ruleForm.name" placeholder="请输入" allow-clear></a-input>
      </a-form-model-item>
      <a-form-model-item label="价格" prop="price">
        <a-input
          v-model="ruleForm.price"
          type="number"
          placeholder="请输入价格"
          allowClear
        ></a-input>
      </a-form-model-item>
      <a-form-model-item label="分红系数" prop="rate">
        <a-input
          v-model="ruleForm.rate"
          type="number"
          placeholder="请输入分红系数"
          allowClear
        ></a-input>
      </a-form-model-item>
      <a-form-model-item label="描述" prop="info">
        <a-textarea v-model="ruleForm.info" placeholder="请输入描述" allowClear></a-textarea>
      </a-form-model-item>
      <a-form-model-item label="封面" prop="imgUrl">
        <a-textarea v-model="ruleForm.imgUrl" placeholder="请输入封面" allowClear></a-textarea>
      </a-form-model-item>
    </a-form-model>
    <a-form-model-item
      :wrapper-col="{ span: 13, offset: 3 }"
      class="form-footer"
      v-if="drawerStatus !== 'info'"
    >
      <a-button type="primary" :loading="submitLoading" @click="onSubmit">保存</a-button>
      <a-button @click="onClose">取消</a-button>
    </a-form-model-item>
  </a-drawer>
</template>

<script>
import { shortProductAddOrUpdate, shortProductDetail } from '@/api/short'
import { checkMoney } from '@/utils/index'
export default {
  name: 'VideoForm',
  data() {
    return {
      visible: false,
      ruleForm: {
        name: '',
        price: '',
        rate: '',
        info: '',
        imgUrl: ''
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      rules: {
        name: [{ required: true, message: '名称不能为空' }],
        price: [{ required: true, message: '价格不能为空' }, { validator: checkMoney }],
        rate: [{ required: true, message: '分红系数不能为空' }],
        info: [{ required: true, message: '描述不能为空' }],
        imgUrl: [{ required: true, message: '封面不能为空' }],
      },
      submitLoading: false,
      drawerTitle: '创建产品',
      drawerStatus: 'add'
    }
  },
  methods: {
    open(record = {}, status = 'add') {
      this.drawerStatus = status
      if (record.id) {
        shortProductDetail(record.id).then(resp=>{
          this.ruleForm = resp.data
        })
        // this.ruleForm = { ...record }
      }
      this.visible = true
    },
    afterVisibleChange(val) {
      if (!val) {
        this.ruleForm = {
          name: '',
          price: '',
          rate: '',
          info: '',
          imgUrl: ''
        }
        this.$refs.ruleForm.resetFields()
      }
    },
    onClose() {
      this.visible = false
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          shortProductAddOrUpdate(this.ruleForm)
            .then(() => {
              this.$notification['success']({
                message: '提示',
                description: `${this.ruleForm.id ? '编辑' : '新增'}成功`
              })
              this.onClose()
              this.submitLoading = false
              this.$emit('on-submit')
            })
            .catch(() => {
              this.submitLoading = false
            })
        }
      })
    },
  },
  components: {}
}
</script>

